<template>
  <v-card
    title="港口计划货量"
    unit="(万吨)"
    bgImg="https://oss.sdland-sea.com/group2/M01/15/F2/Cof8E2Iv5jeAHJv-AACGOoTY9Oo054.png"
  >
    <div class="card-container">
      <SelectControl
        :cargoList="cargoList"
        :tag="tag"
        @handleChacked="fetchData"
      />
      <!-- <div class="body-container">
        <LineChart
          id="portPlan_lineChart"
          v-if="tag == 2"
          :chartData="chartData"
        />
        <LoopSwiperCharts
          id="portPlan_loopSwiperCharts"
          v-else
          domSelect="portPlan"
          :swiperData="chartData"
        />
      </div> -->
    </div>
  </v-card>
</template>

<script>
import MIXIN from "./mixin";
// import { fetchPlan_chart } from "@/api/networShow/dataV";
export default {
  mixins: [MIXIN],
  methods: {
    // getChartData({ tag, cargoName }) {
      // fetchPlan_chart({ tag, cargoName }).then(res => {
      //   const { data } = res;
      //   if (data.code == 200) {
      //     if (tag == 2 && data.data.length < 10) {
      //       this.chartData = Array(10)
      //         .fill(data.data)
      //         .flat();
      //     } else {
      //       if (tag == 1) {
      //         data.data = data.data.filter(item => item.title.trim() !== "");
      //       }
      //       this.chartData = data.data;
      //     }
      //   }
      // });
    // }
  }
};
</script>

<style lang="less" scoped>
.card-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .body-container {
    flex: 1;
    box-sizing: border-box;
    padding-top: 5px;
  }
}
</style>
